{% extends 'index.html' %}
{% load static %}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>title</title>
</head>

<body>

{% block title %}
    <span class="navbar-page-title"> 军事需求知识百科 - 知识卡片模板 </span>
{% endblock %}


{% block content %}
    <div class='container-fluid'>
        <!-- 知识卡片/模板 选择 -->
        <span style="margin: 0 10px 0 10px">知识卡片/模板 </span>

        <select name="card_template_choiced" id="card_template_choiced" class="form-control my-select" onchange="card_template_choiced()" style="width: auto;display: inline;margin-right: 10px">
            <option value="知识卡片模板">知识卡片模板</option>
            <option value="知识卡片">知识卡片</option>
        </select>
        &nbsp;&nbsp;&nbsp;
        <!-- 添加记录 -->
{#        <label for="">知识卡片模板添加：</label>#}
{#        <a class='my-btn-a my-btn' href="{% url 'add_card_template' %}" style="text-align: center;">添加</a>#}
        <button class="my-btn" onclick="javascript:location.href='{% url 'add_card_template' %}'">添加</button>

{#        <p></p>#}

        <div class="form-group" style="margin: 10px 10px;padding: 10px; background-color: #ffffff">
            <!-- 页面信息展示 -->
            <table class="my-table" style="width: 100%">
                <thead>
                <tr>
                    <th style="width:5%;text-align: center;">序号</th>
                    <th style="width:20%;text-align: center;">知识卡片模板名称</th>
                    <th style="width:20%;text-align: center;">知识卡片模板内容</th>
                    <th style="width:20%;text-align: center;">创建时间</th>
                    <th style="width:20%;text-align: center;">操作</th>
                </tr>
                </thead>
                <tbody>
                {% for single_data in card_obj %}
                    <tr style="text-align: center">
                        <td>{{ forloop.counter }}</td>
                        <td>{{ single_data.name }}</td>
                        <td>{{ single_data.content }}</td>
                        <td>{{ single_data.create_time|date:"Y-m-d H:i:s" }}</td>
                        <td>
                            <button class="my-btn" onclick="javascript:location.href='{% url 'edit_card_template' single_data.id %}'">编辑</button>
                            <button class="my-btn" onclick="model_del({{ single_data.id }})">删除</button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block myjs %}
    <script>
        $('#card_template_choiced').val('知识卡片模板');

        document.getElementById("jsxqzsbk").style.display = 'block';
        document.getElementById("zskp").style.backgroundColor = 'rgba(30,21,21,0.44)';
        /**
         * 切换页面
         */
        function card_template_choiced() {
            var choiced = $('#card_template_choiced').val();
            console.log(choiced);
            if (choiced === "知识卡片模板") {
                location.href = "{% url 'card_template' %}"
            } else {
                location.href = "{% url 'knowledge_card' %}"
            }
        }

        /**
         * 删除数据
         */
        function model_del(id) {
            // 生成路径
            var url = "{% url 'delete_card_template' 0  %}";
            url = url.replace(/0/, id);
            // 确认框
            zdconfirm('系统确认框', '你确认删除该条数据吗？', r => r ? window.location.href = url : '');
        }
    </script>
{% endblock %}

</body>

</html>